import type { App, VNode } from 'vue';
import CustomPlugin from './CustomPlugin.vue';
import { createVNode, render } from 'vue';

// 使用对象形式编写插件的时候必须含有 install 函数
// 导出插件
export default {
  // app 为 main.js 中回传的
  install(app: App, options: any) {
    // createVNode vue提供的底层方法，可以给组件创建一个虚拟DOM 也就是Vnode
    const vnode: VNode = createVNode(CustomPlugin);
    // render 把虚拟DOM转为真实DOM 并挂载到指定节点
    render(vnode, document.body);
    // 添加全局方法，让其他组件调用
    console.log('插件中获取组件通过 defineExpose 暴露的方法', vnode.component?.exposed);
    app.config.globalProperties.$customPlugin = {
      show: () => vnode.component?.exposed?.show(),
      hide: () => vnode.component?.exposed?.hide()
    };
  }
};
